<script type="text/javascript"> 
    $(".contentpanel").find(".panel:first").css({'height':$(window).height()-70});

    function snapshots_show(volume_id){
        var result = new Array();
        $.getJSON("/get_snapshots", {'volume_id':volume_id},
            function(snapshots){
                var timelines = '';
                $(".sn_snapshot_timeline").html('');
                for (var i=0; i< snapshots.length; i++){
                    var timeline_str = '<div class="sn_mod1">'
                            + '<div class="sn_box_frame">' +snapshots[i].name+'</div>'
                            + '<div class="sn_line_one"></div>'
                            + '<div class="sn_line_two"></div>'
                            + '<div class="sn_line_three"></div>'
                            + '<div><span style="display:none">'+snapshots[i].id+'</span><div class="tr_c"></div></div> '
                            + '<div class="sn_box_time">'+snapshots[i].created_at+'</div>'
                            + '</div>'
                    timelines += timeline_str;
                }
                $(".sn_snapshot_timeline").append(timelines);
                snapshot_disabled(true);
        })
        return result
    }
    
    
    function select_volume(name, id){
        {% for volume in volumes  %}
            if ("{{volume.id}}" == id){
                $(".sn_table").find("#volume_name").html(name);
                $(".sn_table").find("#volume_size").html("{{ volume.size_gb }}");
                $(".sn_table").find("#volume_created_at").html("{{ volume.created_at }}");
                $(".sn_table").find("#volume_provisioning").html("{{ volume.provisioning_show }}");
                $(".sn_table").css({"display":"block"});
                $(".hint").css({"display":"none"});
                $(".snapshot_axis").css({"display":"block"});
                $(".sn_snapshot_option").css({"display":"block"});
                snapshots_show("{{ volume.id }}");
            }
        {% endfor %}
    }
    var d = new Array();
    {% for volume in volumes %}
        var values = new Array();
        values[0] = "{{volume.id}}"
        values[1] = "{{volume.name}}"
        d.push(values)
    {% endfor %}

    $('#volume_select').rqDropDown({
        "datatype":"local",
        "source":d,
        "onchange":"select_volume"
    });  
     $('#volume_select_').rqDropDown({
        "datatype":"local",
        "source":d,
        "onchange":"select_volume"
    }); 
    function snapshot_delete(snapshot_id){     
        $.post("/snapshot_delete", {'id':snapshot_id},
            function(data){
                if (data.reply.is_success){
                    snapshots_show($("#volume_select").attr("realvalue"))
                    SelfAlert("删除成功", "完成提示");
                }else{
                    error =  data.reply.error;
                    SelfAlert("删除失败："+error)
                }
        });
    }

    $(".sn_snapshot_option #snapshot_create").click(function(){
        var volume_id = $("#volume_select").attr("realvalue");
        angular.element('#snapshot_create').scope().open("/snapshot_create?id="+volume_id);
        //$("#div_snapshot_create_update").dialog("open");
        
        //$("#div_snapshot_create_update").load("/snapshot_create?id="+volume_id);
    });
    $(".sn_snapshot_option #snapshot_update").click(function(){
        $("#div_snapshot_create_update").dialog("open");
        $("#div_snapshot_create_update").dialog('option', 'title', '编辑快照');
        var buttons = {"确定": function() {
                submit_snapshot_update();
            },
            "取消": function() {
                $(this).dialog("close");
            },
        }
        $("#div_snapshot_create_update").dialog('option', 'buttons', buttons);
        snapshot_id = $(".pitch").find("span").text();
        $("#div_snapshot_create_update").load("/snapshot_update?id="+snapshot_id);
    });
    $(".sn_snapshot_option #snapshot_delete").click(function(){
        snapshot_id = $(".pitch").find("span").text();
        msg = '确认删除快照?';
        SelfConfirm(msg, snapshot_delete, snapshot_id, "删除提示");
    });

    $(".sn_snapshot_timeline").delegate(".sn_mod1","click",function(){
        $(".sn_mod1").removeClass("pitch");
        $(".tr_c").css('display','none');
        $(this).find(".tr_c").css({'display':'block'});
        $(this).addClass("pitch");
        snapshot_disabled(false);
    });

    function snapshot_disabled(bool){
        $("#snapshot_delete").attr("disabled", bool);
        $("#snapshot_rollback").attr("disabled", bool);
        $("#snapshot_update").attr("disabled", bool);
        $("#clone_volume").attr("disabled", bool);
    }

    function snapshot_rollback(snapshot_id){     
        $.post("/snapshot_rollback", {'id':snapshot_id},
            function(data){
                if (data.reply.is_success){
                    snapshots_show($("#volume_select").attr("realvalue"))
                    SelfAlert("回滚快照完成", "完成提示");
                }else{
                    error =  data.reply.error;
                    SelfAlert("回滚快照失败："+error)
                }
        });
    }

    $(".sn_snapshot_option #snapshot_rollback").click(function(){
        snapshot_id = $(".pitch").find("span").text();
        msg = "确认回滚快照？"
        SelfConfirm(msg, snapshot_rollback, snapshot_id, "确认提示");
    });

    $(".sn_snapshot_option #clone_volume").click(function(){
        snapshot_id = $(".pitch").find("span").text();
        angular.element('#snapshot_create').scope().open("/snapshot_clone?id="+snapshot_id);
    });
    $(".sn_snapshot_option #snapshot_task").click(function(){
        var volume_id = $("#volume_select").attr("realvalue");
        angular.element('#snapshot_create').scope().open("/snapshot_task?volume_id="+volume_id);
    });
     if($(window).height()<750){
           $(".panel-h").css({'height':750});
    }
</script> 
<div class="panel panel-default panel-h">
    <div class="panel-body">
        <div class="snapshot_contant">
                <div class="snapshot_apply">
                <div style="margin-top:20px;height:35px;width:500px;">
                    <p style="float:left;line-height:38px;margin-left:20px;font-size:16px;">[['Storage volume'|translate]]:</p>
                    {% if volumes |length == 0 %}
                        <input id="volume_select"  class="rounded_dropdown" readonly="readonly"  style="width:150px;" value="请先创建卷" realvalue='all'/>
                    {% else %}
                        <input id="volume_select"  class="rounded_dropdown" readonly="readonly"  style="width:150px;" value="请选择卷" realvalue='all'/>
                    {% endif %}
                    <p style="line-height:45px;">([['Please select a volume for detailed operation'|translate]])</p>
                    
                </div>
                <table class="sn_table" style="display:none">
                    <tr><td style="font-size:25px;">[['detailed information'|translate]]:<td></tr>
                    <tr>
                       <td >[['storage volume name'|translate]]</td>
                       <td id="volume_name"></td>
                        <td></td>
                        <td>[['storage volume size'|translate]]</td>
                        <td><span id="volume_size"></span>GB</td>   
                    </tr>
                    <tr>
                       <td>[['Creation date'|translate]]</td>
                       <td id="volume_created_at"></td>
                        <td></td>
                        <td>[['Disk configuration'|translate]]</td>
                        <td id="volume_provisioning"></td>  
                    </tr>
                </table>
                <div class="snapshot_axis">
                    
                    <div class="sn_snapshot_option" style="display:none">
                        <button id="snapshot_create" class="button_gray" ng-controller="SnapshotModalCtrl">[['Create snapshot'|translate]]</button>
                        <button id="clone_volume" class="button_gray" ng-controller="SnapshotModalCtrl">[['Clone storage volume'|translate]]</button>
                        <button id="snapshot_rollback" disabled="disabled" class="button_gray">[['rollback'|translate]]</button>
                        <button id="snapshot_update"   disabled="disabled" style="display:none" class="button_gray">编辑</button>
                        <button id="snapshot_delete"   disabled="disabled" class="button_gray">[['delete snapshot'|translate]]</button>
                        <button id="snapshot_task" class="button_gray">[['snapshot task'|translate]]</button>
                    </div>
                    <div class="sn_snapshot_timeline">
                    </div>
                </div> 
                    
    </div>
</div> <!-- snapshot_contant-->
<div id="div_snapshot_create_update" title="快照"></div>
<div id="div_clone_volume" title="基于快照克隆存储卷"></div>
<div id="div_snapshot_task" title="快照任务"></div>
